<!-- 头部 -->
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <base href="/guguanjia/">
        <meta charset="utf-8"/>
        <meta name="renderer" content="webkit">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <title>固管家服务平台</title>

        <meta name="description" content="index"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

        <!-- bootstrap & fontawesome -->
        <link rel="stylesheet" href="static/bootstrap/bootstrap.min.css"/>
        <link rel="stylesheet" href="static/css/font-awesome.min.css"/>

        <link rel="stylesheet" href="static/chosen/chosen.min.css"/>

        <!-- ace styles -->
        <link rel="stylesheet" href="static/ace/css/ace.min.css" id="main-ace-style"/>

        <!--[if lte IE 9]>
        <link rel="stylesheet" href="static/ace/css/ace-part2.min.css"/>
        <![endif]-->
        <link rel="stylesheet" href="static/ace/css/ace-skins.min.css"/>
        <link rel="stylesheet" href="static/ace/css/ace-rtl.min.css"/>

        <!--[if lte IE 9]>
        <link rel="stylesheet" href="static/ace/css/ace-ie.min.css"/>
        <![endif]-->

        <link rel="stylesheet" href="static/ztree/metro.css"/>
        <link rel="stylesheet" href="static/validate/css/validform.css"/>
        <link rel="stylesheet" href="static/css/custom.css"/>

        <!--[if !IE]> -->
        <script src="static/jquery/jquery.js"></script>
        <!-- <![endif]-->

        <!--[if IE]>
        <script src="static/jquery/jquery-1.11.1.min.js"></script>
        <![endif]-->


        <!-- ace settings handler -->
        <script src="static/ace/js/ace-extra.min.js"></script>

        <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

        <!--[if lte IE 8]>
        <script src="static/bootstrap/html5shiv.min.js"></script>
        <script src="static/bootstrap/respond.min.js"></script>
        <script>var ie8 = "ie8";</script>
        <![endif]-->
    </head>

    <body class="no-skin" id="body-content">
        <!-- 顶部条 -->
        <div id="navbar" class="navbar navbar-default">
            <script type="text/javascript">
                try {
                    ace.settings.check('navbar', 'fixed')
                } catch (e) {
                }
            </script>

        </div>
        <!-- 主体 -->
        <div class="main-container" id="main-container">


            <div id="sidebar" class="sidebar responsive">


            </div>


            <div class="main-content">
                <div class="breadcrumbs" id="breadcrumbs">

                    <ul class="tab" id="breadcrumb">
                        <!-- <li class="active" >
                       菜单配置<i class="fa fa-times close"></i>
                       </li>  -->
                    </ul><!-- /.breadcrumb -->
                    <div id="tab-menu">
                        <ul class="dropdown-menu dropdown-caret" style="min-width: 0px;">
                            <li>
                                <a href="javascript:void(0);" data-right-menu="all_close">全部关闭</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" data-right-menu="other_close">关闭其他</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="page-content">
                    <div class="ace-settings-container" id="ace-settings-container">
                        <div class="btn btn-app btn-xs btn-warning ace-settings-btn"
                             id="ace-settings-btn">
                            <i class="ace-icon fa fa-cog bigger-150"></i>
                        </div>

                        <div class="ace-settings-box clearfix" id="ace-settings-box">
                            <div class="pull-left width-50">
                                <div class="ace-settings-item">
                                    <div class="pull-left">
                                        <select id="skin-colorpicker" class="hide">
                                            <option data-skin="no-skin" value="#438EB9">#438EB9</option>
                                            <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                                            <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                                            <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                                        </select>
                                    </div>
                                    <span>&nbsp; 皮肤</span>
                                </div>

                                <div class="ace-settings-item">
                                    <input type="checkbox" class="ace ace-checkbox-2"
                                           id="ace-settings-navbar"/>
                                    <label class="lbl"
                                           for="ace-settings-navbar">固定页头
                                    </label>
                                </div>

                                <div class="ace-settings-item">
                                    <input type="checkbox" class="ace ace-checkbox-2"
                                           id="ace-settings-sidebar"/>
                                    <label class="lbl"
                                           for="ace-settings-sidebar">固定导航菜单
                                    </label>
                                </div>

                                <div class="ace-settings-item">
                                    <input type="checkbox" class="ace ace-checkbox-2"
                                           id="ace-settings-breadcrumbs"/>
                                    <label class="lbl"
                                           for="ace-settings-breadcrumbs">固定导航条
                                    </label>
                                </div>



                                <div class="ace-settings-item">
                                    <input type="checkbox" class="ace ace-checkbox-2"
                                           id="ace-settings-add-container"/>
                                    <label class="lbl"
                                           for="ace-settings-add-container">固定宽度
                                    </label>
                                </div>
                            </div>
                            <!-- /.pull-left -->

                            <div class="pull-left width-50">
                                <div class="ace-settings-item">
                                    <input type="checkbox" class="ace ace-checkbox-2"
                                           id="ace-settings-hover"/>
                                    <label class="lbl"
                                           for="ace-settings-hover">滑动式菜单
                                    </label>
                                </div>

                                <div class="ace-settings-item">
                                    <input type="checkbox" class="ace ace-checkbox-2"
                                           id="ace-settings-compact"/>
                                    <label class="lbl"
                                           for="ace-settings-compact">紧凑式菜单
                                    </label>
                                </div>

                                <div class="ace-settings-item">
                                    <input type="checkbox" class="ace ace-checkbox-2"
                                           id="ace-settings-highlight"/>
                                    <label class="lbl"
                                           for="ace-settings-highlight">高亮选中
                                    </label>
                                </div>
                            </div>
                            <!-- /.pull-left -->
                        </div>
                        <!-- /.ace-settings-box -->
                    </div>
                    <!-- /.ace-settings-container -->
                    <div class="page-header">
                        <h1>菜单配置</h1>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div id="fill-main-content" style="height:100%">
                                <div class="widget-box widget-color-green2">
                                    <div class="widget-header clearfix">
                                        <h5 class="widget-title">菜单配置</h5>
                                        <div class="widget-toolbar">
                                            <a data-action="fullscreen" class="orange2">
                                                <i
                                                        class="ace-icon fa fa-expand"></i>
                                            </a>
                                        </div>
                                        <div class="widget-toolbar no-border width-40" style="padding-top: 2px;">
                                            <form method="post" class="form-search" id="search-form1" target="list-page"
                                                  action="menu/list">
                                                <div class="input-group" style="line-height: 0px;">
                                                    <span class="input-group-btn">
                                                        <span class=" btn  btn-success btn-sm"
                                                              id="search-all-btn" @click="selectAll()">
                                                            显示全部
                                                        </span>
                                                    </span>
                                                    <input type="text" class="form-control search-query"
                                                           name="name" placeholder="菜单名称" id="search-input" v-model="condition.name">
                                                    <span class="input-group-btn">
                                                        <span class="btn  btn-success btn-sm" id="search-btn" @click="selectName()">
                                                            搜索
                                                            <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
                                                        </span>
                                                    </span>
                                                </div>
                                                <input type="hidden" name="id"/>
                                            </form>
                                        </div>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main padding-8">
                                            <div class="row">
                                                <div class="col-sm-3">
                                                    <div>
                                                        <ul id="treeMenu" class="ztree">


                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col-sm-9" id="list-page">
                                                    <table class="table table-striped table-bordered table-hover nomargin-bottom">
                                                        <thead>
                                                            <tr>
                                                                <th class="center">ID</th>
                                                                <th class="center">名称</th>
                                                                <th class="center">链接</th>
                                                                <th class="center">上级菜单</th>
                                                                <th class="center">资源类型</th>
                                                                <th class="center">权限类型</th>
                                                                <th class="center">图标</th>
                                                                <th class="center">排序号</th>
                                                                <th class="center">使用状态</th>
                                                                <th class="center">操作</th>
                                                            </tr>
                                                        </thead>

                                                        <tbody>
                                                            <tr v-for="r in pageInfo.list">
                                                                <td class="center">{{r.id}}</td>
                                                                <td class="center">
                                                                    <a href="">
                                                                        {{r.name}}
                                                                    </a>
                                                                </td>
                                                                <td class="center">
                                                                   {{r.url}}
                                                                </td>
                                                                <td class="center">
                                                                    业务管理
                                                                </td>
                                                                <td class="center">
                                                                    菜单资源
                                                                </td>
                                                                <td class="center" v-if="r.common==0">不是</td>
                                                                <td class="center" v-else-if="r.common==1">是</td>
                                                                <td class="center">
                                                                    <i class="ace-icon  bigger-200 pink" :class="r.icon"
                                                                       style="vertical-align: middle;padding-right: 10px;"></i>
                                                                </td>
                                                                <td class="center">
                                                                    {{r.sort}}
                                                                </td>
                                                                <td class="center" v-if="r.status==0">正常</td>
                                                                <td class="center" v-else-if="r.status==1">禁用</td>
                                                                <td class="center">
                                                                    <div class="hidden-sm hidden-xs action-buttons">
                                                                        <a class="green"  data-title="APP管理编辑" @click="toUpdate(r)">
                                                                            <i class="ace-icon fa fa-pencil bigger-130"></i>
                                                                        </a>

                                                                        <a class="red" href="javascript:void(0);"
                                                                          data-title="删除操作" @click="doDelete(r)" >
                                                                            <i class="ace-icon fa fa-trash-o bigger-130"></i>
                                                                        </a>
                                                                    </div>
                                                                </td>
                                                            </tr>


                                                        </tbody>
                                                    </table>
                                                    <div class="space-8"></div>

                                                    <div class="clearfix">
                                                        <div style="float: left;">
                                                            <div style="padding-top:5px;">
                                                                <span class="badge badge-info">
                                                                    当前第 {{pageInfo.pageNum}} 页 / {{pageInfo.pages}} 页，共 {{pageInfo.total}} 条数据
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <div class="pagination no-margin pull-right clearfix">
                                                                <li class="prev"><a href="javascript:void(0);" @click="selectPage()">首页</a></li>
                                                                <li v-if="pageInfo.hasPreviousPage" class="prev"><a href="javascript:void(0);"
                                                                                                                    @click="selectPage(pageInfo.prePage,pageInfo.pageSize)">上一页</a>
                                                                <li v-else="" class="prev disabled"><a>上一页</a></li>

                                                                <li :class="pageInfo.pageNum==i?'active':''" v-for="i in pageInfo.navigatepageNums"><a href="javascript:void(0);"
                                                                                                                                                       @click="selectPage(i,pageInfo.pageSize)">{{i}}</a></li>

                                                                <li v-if="pageInfo.hasNextPage" class="next "><a href="javascript:void(0);" @click="selectPage(pageInfo.nextPage,pageInfo.pageSize)">下一页</a>
                                                                <li v-else="" class="next disabled"><a >下一页</a></li>

                                                                <li class="next"><a href="javascript:void(0);" @click="selectPage(pageInfo.pages,pageInfo.pageSize)">尾页</a></li>
                                                            </div>

                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>
                    </div>
                </div><!-- /.page-content -->

            </div><!-- /.main-content -->

            <a href="javascript:void(0);" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"
               style="z-index:1111">
                <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
            </a>
        </div><!-- /.main-container -->

        <!-- 底部 -->
        <!-- basic scripts -->

        <!--[if !IE]> -->
        <script src="static/jquery/jquery.js"></script>
        <!-- <![endif]-->

        <!--[if IE]>
        <script src="static/jquery/jquery-1.11.1.min.js"></script>
        <![endif]-->


        <script src="static/bootstrap/bootstrap.min.js"></script>

        <!-- ace scripts -->
        <script src="static/ace/js/ace-elements.min.js"></script>
        <script src="static/ace/js/ace.min.js"></script>

        <script type="text/javascript">
            var ctxPath = "../../..";
            window.onload = function () {

            };
            $(function () {
                $("#navbar").load("main/navbar");
                $("#sidebar").load("main/sidebar")
            });
        </script>

        <!-- 引入其他js -->
        <script src="static/js/history.js"></script>
        <script type="text/javascript" src="static/layer/layer.js"></script>
        <script type="text/javascript" src="static/js/spin.min.js"></script>
        <script type="text/javascript" src="static/ztree/jquery.ztree.all-3.5.min.js"></script>
        <script type="text/javascript" src="static/js/jquery.autosize.min.js"></script>
        <script type="text/javascript" src="static/chosen/chosen.jquery.min.js"></script>
        <script type="text/javascript" src="static/validate/Validform_v5.3.2_min.js"></script>
        <script type="text/javascript" src="static/js/jquery.form.js"></script>
        <script type="text/javascript" src="static/js/bootstrap-contextmenu.js"></script>
        <script type="text/javascript" src="static/js/jquery.nicescroll.min.js"></script>
        <script type="text/javascript" src="static/js/public.js"></script>


        <script type="text/javascript" src="static/vue/vue.js"></script>
        <script type="text/javascript" src="static/vue/axios.js"></script>
        <script type="text/javascript" src="static/js/menu/index.js"></script>



    </body>
</html>
